<template>
	<view class="out-box">
		<view class="tousu">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
		<view class="hader">
			<view class="name">
				<view class="name_titile">联系人：</view>
				<input class="uni-input" placeholder="请填写联系人称呼" v-model="user.name" :placeholderStyle="placeholderStyle" />
			</view>
			<view class="hr"></view>
			<view class="name">
				<view class="name_titile">联系方式：</view>
				<input class="uni-input" type="namber" placeholder="请填写您的联系电话或微信号" v-model="user.phone" :placeholderStyle="placeholderStyle"/>
			</view>
		</view>
		<!-- 下面的内容 -->
		<view class="main">
			<view class="title">请填写意见或投诉内容</view>
			<textarea rows="5" cols="50" placeholder="请填写您想要反馈的意见或者投诉内容" v-model="user.content"></textarea>
			<view class="title">上传图片（选填）</view>
			<view class="upimg">
				<cl-upload v-model="list" 
					useBeforeDelete 
					useBeforeUpload
					fileType="image"
					@beforeDelete="beforeDelete"
					@beforeUpload="beforeUpload"
					:imageFormData="imageFormData"
					ref="upload2"
				></cl-upload>
			</view>
		</view>
		<!-- 最下方的按钮 -->
		<view class="buttom" @tap="onsubmit">反馈提交</view>
	</view>
</template>

<script setup>
import {ref,reactive,onBeforeMount,onMounted} from 'vue'
import {onShow} from '@dcloudio/uni-app'
import {onGotApiData,addClick} from '../../util/api.js'
	const props = defineProps({
		obj: String,
	});
	console.log("进来时候接受的参数",props.obj)

	// 每次切换展示页面
	onShow(()=>{
		console.log('onShow')	
	})  
	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log('组件准备渲染',);
		user.user_id = uni.getStorageSync('user_id') || null;
		user.openid = uni.getStorageSync('open_id') || null
		// 看看本地是否存储user_id
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});
	// 用户信息
	let user = reactive({
		openid:null,
		user_id:null,
		phone:'',
		name:'',
		content:'',
		shop_collect_count:0,
		shop_count:0,
		avatarUrl:'',
		imgs:''
	})
	// 输入框的样式
	const placeholderStyle = ref("color: rgba(128, 128, 128, 1);font-size:28rpx")
	// const style = ref('border-color: #fff;background: rgba(222, 222, 222, 1);')
// 上传图片的参数
	const imageFormData = reactive({
		compress:true,
		quality:50,

	})

	// 上方图片列表
	let list = ref([])
/**
 * 删除前钩子
 * @param {Object} item 当前删除的图片或者视频信息
 * @param {Number} index 当前删除的图片或视频索引
 * @param {Function} next 调用此函数继续执行组件删除逻辑
 * */ 
	const beforeDelete = (item, index, next)=> {
		uni.showModal({
			title: '提示信息',
			content: '确定要删除这个文件嘛？',
			success: res => {
				if (res.confirm) {
					console.log("点击确定删除",res.confirm)
					list.value.splice(index,1);
					console.log("item",item)
				}
			}
		});
	}
	/**
	* 上传前钩子
	* @param {Object} tempFile 当前上传文件信息
	* @param {Function} next 调用此函数继续执行组件上传逻辑
	* */
	const beforeUpload = (tempFile, next) => {
		console.log('上传前钩子', tempFile);

			// 对于上传照片的数量做限制
		const listlen  = list.value.filter(item => typeof item === 'object').length;
		if(listlen >= 6){
			return 	uni.showToast({
						title: '最多上传6张图片',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					}) 
			}

		// 调用上传图片
		upimg(tempFile)
	}
	// 上传图片的接口
	const upimg = (tempFile) =>{
		uni.showToast({
				title: '图片上传中',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		console.log('tempFile', tempFile)
		uni.uploadFile({
			url: 'https://shop-file.pupuduo.com:8886/api/app/file/upload_img', //仅为示例，非真实的接口地址
			// url: 'http://192.168.1.51:8081/api/app/file/upload_img', 
			filePath: tempFile,
			name: 'file',
			success: (uploadFileRes) => {
				console.log("我是服务期上的图片",uploadFileRes)
				upimg_value(uploadFileRes.data)
			}
		});
	}
	// 上传图片返回结果
	const upimg_value = (result) => {
		const obj = JSON.parse(result);
		console.log('返回对象', obj.data);
		const objone = {
			path: obj.data.url,
		}
		// 返回的结果进行存储
		list.value.push(objone)
		console.log("我是list",list.value)	
			// list.value.map(item => item.path);
		user.imgs = list.value.map(item => item.path);
		user.imgs = JSON.stringify(user.imgs);
		console.log("我是图片数组",user.imgs)
	}
	// 提交资料
	const onsubmit = () =>{
		let params = reactive({
			name:user.name,
			phone:user.phone,
			content:user.content,
			imgs:user.imgs,
			})
		console.log("params",params)
		// 判断表单填写是否完整
		if(!user.name || !user.phone || !user.content){
			return uni.showToast({
						title: '请完整填写表单',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					}) 
			
		}
		// 正则表达式判断手机号
		// const regex = /^1[3|4|5|7|8][0-9]{9}$/; // 正则表达式：只允许字母和数字
		// if(!regex.test(user.phone)){
		// 	// console.log(regex.test(user.phone)
		// 	// console.log('sdasd',!regex.test(user.phone),user.phone)
		// 	return uni.showToast({
		// 				title: '填写正确手机号',
		// 				//将值设置为 success 或者直接不用写icon这个参数
		// 				icon: 'none',
		// 				//显示持续时间为 2秒
		// 				duration: 2000
		// 			}) 
			
		// }
		onGotApiData('/api/app/mine/feedback','POST',params,onsubmit_value)
	}
	const onsubmit_value = (result) =>{
		console.log('反馈的结果',result)
		uni.showToast({
				title: '反馈成功',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
			setTimeout(()=>{
				uni.switchTab({
					url: '/pages/index/index'
				});
			},2000)
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: calc(100vh - 10rpx);
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(229, 229, 229, 1);
		width: 750rpx auto;
		padding-top: 10rpx;
		.tousu{
			width: 730rpx;
			height:40rpx;
			margin: 0 auto;
			line-height:30rpx;
			text-align:center;
			color: rgba(255, 107, 101, 1);
			font-size:20rpx;
		}
		.hader{
			width: 730rpx;
			height: 180rpx;
			
			justify-content:center;	
			background-color: #F5F5F5;
			font-weight: 600;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			padding-top: 16rpx;
			margin: 0 auto;
			
			.hr{
				width: 700rpx;
				height: 1rpx;
				margin:  0 auto;
				border-bottom: 1px solid  rgba(229, 229, 229, 1);
			}
			.name{
				width: 730rpx;
				height: 80rpx;
				// border: 1px solid black;
				display: flex;
				.name_titile{
					width: 160rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 80rpx;
					color: rgba(46, 46, 46, 1);
					margin-left: 20rpx;
				}
				input{
					width: 500rpx;
					margin-top: 18rpx;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40px;
					color: rgba(46, 46, 46, 1);
				}
			}
		}
		.main{
			width: 730rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0 auto;
			margin-top: 10rpx;
			border-radius: 10rpx;
			padding-bottom: 20rpx;
			.title{
				width: 700rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(46, 46, 46, 1);
			}
			textarea{
				width: 680rpx;
				height: 200rpx;
				margin:  0 auto;
				padding: 10rpx;
				background-color: #F2F2F2;
				border-radius: 10rpx;
			}
			.upimg{
				width: 700rpx;
				margin: 0 auto;
			}
		}
		.buttom{
			width: 660rpx;
			height: 90rpx;
			background-color: rgba(255, 87, 51, 1);
			border-radius: 20rpx;
			margin: 0 auto;
			font-weight: 400;
			margin-top: 40rpx;
			font-size: 40rpx;
			line-height: 90rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
</style>
